<template>
	<view class="container" style="height: 100vh;">
		<view class="header" :style="{ backgroundImage: 'url(' + IMG_URL + Background + ')' }">
			<view id="scrollView" class="dis-flex flex-y-center flex-x-between" :class="{ isFixed: isTop == 1 }">
				<image class="imgicon" src="/static/imgs/fenlei.png" mode="widthFix" @click="() => show = true" />
				<view class="book flex-box" v-if="isTop == 1">{{ user.username }}</view>
				<view class="dis-flex flex-y-center">
					<u-upload :fileList="fileList" name="files" v-if="isTop == 0" @afterRead="afterRead">
						<view class="upload">上传背景</view>
					</u-upload>
					<image class="imgicon2" src="/static/imgs/sz.png" mode="widthFix"
						@click="toJump('/pages/my/setup')" />
				</view>
			</view>

			<view class="dis-flex flex-y-center boxWrap">
				<image v-if="user.avatar" class="avatar" :src="IMG_URL + user.avatar" style="border-radius:50% ;" />
				<image v-else class="avatar" src="/static/imgs/myavatar.png" />
				<view class="nameWrap flex-box">
					<view class="name">{{ user.username }}</view>
					<view class="ids">ID：{{ user.I_D || '' }}</view>
					<view class="bz dis-flex flex-y-center">
						<view class="gxz" v-if="user.is_love == 1">官宣中</view>
						<view class="gxz yrz" v-if="user.name">已认证</view>
						<view class="gxz yrz" v-else>未认证</view>
					</view>
				</view>
			</view>
			<view class="infomation"><text>{{ user.gender == 0 ? '女' : '男' || '' }}</text> <text>{{ user.age ? '/' +
			user.age +
			'岁' : '' }}</text> <text>{{ user.constellation ? '/' + user.constellation : ''
					}}</text><text>{{ user.location ? '/' + user.location : '' }}</text> </view>
			<view class="desc" v-if="logon !== 0">{{ user.introduction ? user.introduction : '个人简介说明......' }}</view>
			<view class="love dis-flex flex-y-center">
				<view class="loves  dis-flex flex-y-center flex-x-center" @click="toJump('/pages/love/history?type=1')">
					<image class="avatar" src="/static/imgs/l_icon1.png" mode="widthFix" />恋爱史
				</view>
				<view class="loves  dis-flex flex-y-center flex-x-center" @click="toJump('/pages/love/history?type=2')">
					<image class="avatar" src="/static/imgs/l_icon2.png" mode="widthFix" />闺蜜史
				</view>
			</view>
			<view class="flex-all summary">
				<view @click="toJump('/pages/my/fans?type=1')">
					<view>{{ formatNumber(user.follow) || 0 }}</view>
					<view>关注</view>
				</view>
				<view class="line">|</view>
				<view @click="toJump('/pages/my/fans?type=2')">
					<view>{{ formatNumber(user.fons) || 0 }}</view>
					<view>粉丝</view>
				</view>
				<view class="line">|</view>
				<view>
					<view>{{ formatNumber(user.like_count) || 0 }}</view>
					<view>获赞</view>
				</view>
			</view>
		</view>


		<view class="notice_box" :class="{ notice_boxFix: isTop == 1 }">
			<view class="register_txt tac">
				<u-tabs :list="tabs" lineColor="#252525" :activeStyle="activeStyle" :current="current"
					@click="tabClick"></u-tabs>
			</view>
			<view class="second dis-flex flex-x-start flex-y-center" v-if="current == 0">
				<view v-for="(item, index) in secondMenus" :key="index" class="secondItem tac"
					:class="{ cur: index == actives }" @click="secondBtn(index)">{{ item.name }}</view>
			</view>

			<view class="u-content">
				<WaterFall :list="list" :type="type" v-if="showList" :postType="postType">
				</WaterFall>
			</view>
		</view>


		<!-- 左侧弹窗 -->
		<u-popup :show="show" mode="left" @close="() => show = false">
			<view class="menus">
				<view class="items" v-for="item in menus" @click="Anoath(item.id)" :key="item.id">{{ item.name }}</view>
			</view>
		</u-popup>
		<Publish v-if='isPublish' @changeClose="() => isPublish = false"></Publish>
		<!-- <view style="position: fixed; bottom: 0; left: 0; right: 0;"> -->
		<Tabbar path="/pages/my/index"></Tabbar>
		<!-- </view> -->
	</view>
</template>

<script>
import {
	IMG_URL,
} from "../../config/app.js";
import env from '@/utlis/env.js';
import {
	getinfos
} from "../../api/login.js"
import WaterFall from '@/components/waterfall/waterfall'
import Publish from '@/components/publish'
import { uploadImage } from "../../api/common.js";
import {
	mapGetters
} from "vuex";
export default {
	components: {
		WaterFall,
		Publish
	},
	data() {
		return {
			IMG_URL: IMG_URL,
			user: {},
			fileList: [],
			show: false,
			current: 0,
			isPublish: false,
			tabs: [{
				name: '帖子'
			}, {
				name: '收藏'
			}, {
				name: '历史'
			}, {
				name: '我喜欢'
			}],
			list: [],
			isTop: 0,
			myScroll: 0,
			secondMenus: [{ name: '分享', id: 1 }, { name: '永久', id: 2 }, { name: '宣文', id: 2 }, { name: '时间', id: 2 }],
			actives: 0,
			menus: [{
				name: '绑定介绍',
				id: 1
			}, {
				name: '宣文介绍',
				id: 2
			}],
			activeStyle: {
				color: '#252525'
			},
			url: '',
			type: 6,
			showList: true,
			postType: 0,
			Background: '',
			logon: ''
		}
	},
	onShow() {
		uni.hideTabBar()
		// this.search = this.$store.state.searchData;
		// console.log(this.search,'加入搜索');
		this.showList = true

		this.getinfo()
		this.change()



	},
	onload() {
		uni.hideTabBar()
	},
	onHide() {
		this.showList = false
	},
	created() {


	},
	onPageScroll: function (e) {
		console.log('scroll', e)
		if (e.scrollTop > this.myScroll) {
			console.log('666')
			this.isTop = 1
		} else {
			this.isTop = 0
		}
	},
	mounted() {
		this.url = env.baseUrl
		console.log('mounted 组件挂载完毕状态===============》');
		const query = uni.createSelectorQuery().in(this);
		query.select('#scrollView').boundingClientRect(data => {
			console.log("得到布局位置信息" + JSON.stringify(data));
			console.log("节点离页面顶部的距离为" + data.top);
			this.myScroll = data.top + 100
		}).exec();
	},
	computed: {
		...mapGetters({
			page_update_notice: "page_update_notice",
		}),
	},
	watch: {
		page_update_notice() {
			this.isPublish = true
		}
	},
	methods: {
		Anoath(id) {
			console.log(id)
			if (id == 1) {
				uni.navigateTo({
					url: "/pages/login/agreement?type=binding"
				})
			} else {
				uni.navigateTo({
					url: "/pages/login/agreement?type=announcement"
				})
			}
		},
		// 显示与隐藏
		change() {
			this.logon = uni.getStorageSync("num") == 1 ? 0 : 1
		},
		// 上传背景图
		async afterRead(e) {
			console.log(e)
			const res = await uploadImage(e.file.url)
			// console.log(res)
			this.Background = res.data.url
			// console.log(this.Background)
		},
		toJump(url) {
			if (!url) return
			uni.navigateTo({
				url
			});
		},

		tabClick(e) {
			console.log('切换状态', e.index);
			this.current = e.index
			if (e.index == 0) {
				this.type = 6
			}
			if (e.index == 1) {
				this.type = 7
			}
			if (e.index == 2) {
				this.type = 8
			}
			if (e.index == 3) {
				this.type = 9
			}

		},
		secondBtn(index) {
			console.log('切换状态', index);
			this.actives = index
			this.postType = index
		},
		formatNumber(num) {
			// 将数字转换为带有"万"单位的字符串
			if (num >= 10000) {
				return (num / 10000).toFixed(1) + "w";
			} else {
				return num?.toString();
			}
		},
		//获取个人信息
		async getinfo() {
			const res = await getinfos().then(res => {
				console.log(res, '获取个人信息');
				this.user = res.data
				console.log(this.user)
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	background: #fff;

	.header {
		background: #F6F6F6;
		height: 730rpx;
		padding: 52rpx 30rpx 45rpx;
		padding-top: 88rpx;
		background-size: cover;

		.isFixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
			width: 100%;
			padding: 50rpx 30rpx;
			padding-top: 99rpx;
			background: #f6f6f6;
			transition: all 1s ease;
		}

		.imgicon {
			width: 36rpx;
		}

		.book {
			font-weight: bold;
			font-size: 34rpx;
			color: $uni-text-color;
			text-align: center;
		}

		.upload {
			width: 138rpx;
			height: 42rpx;
			line-height: 42rpx;
			text-align: center;
			border-radius: 21rpx;
			border: 1px solid $uni-border-color;
			font-size: 24rpx;
			color: $uni-text-color-placeholder;
			margin-right: 24rpx;
		}

		.imgicon2 {
			width: 42rpx;
		}

		.official {
			font-weight: bold;
			font-size: 34rpx;
			color: $uni-text-color;
			text-align: center;
			margin: 30rpx auto;
		}

		.officialTime {
			font-weight: bold;
			font-size: 60rpx;
			color: $uni-text-color;
			text-align: center;
			margin-bottom: 12rpx;
		}

		.boxWrap {
			margin: 24rpx 0 32rpx;

			.avatar {
				width: 200rpx;
				// flex-shrink: 0;
				height: 200rpx;
			}

			.nameWrap {
				margin-left: 30rpx;

				.name {
					font-weight: 800;
					font-size: 48rpx;
					line-height: 56rpx;
					color: $uni-text-color;
				}

				.ids {
					font-size: 24rpx;
					color: $uni-text-color;
					margin: 20rpx 0;
				}

				.bz {
					.gxz {
						width: 140rpx;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						background: #FE3849;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #fff;
						margin-right: 12rpx;
					}

					.yrz {
						background: #000;
					}
				}
			}
		}

		.infomation {
			font-size: 24rpx;
			color: $uni-text-color;
			line-height: 40rpx;
		}

		.desc {
			font-size: 24rpx;
			color: $uni-text-color;
			line-height: 40rpx;
			margin: 20rpx 0;
		}

		.love {
			.loves {
				width: 170rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: #fff;
				border-radius: 26rpx;
				border: 1px solid #DDDDDD;
				margin-right: 28rpx;
				font-size: 24rpx;
				color: $uni-text-color;

				.avatar {
					width: 36rpx;
					margin-right: 8rpx;
				}
			}
		}

		.summary {
			height: 114rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			border: 1px solid rgba(0, 0, 0, 0.13);
			margin-top: 30rpx;
			justify-content: space-around;


			&>view {
				text-align: center;
				color: $uni-text-color;

				&.line {
					color: #ddd;
				}
			}
		}




	}

	.notice_box {
		width: 100%;
		// overflow: auto;
		// margin-top: 1000rpx;
		// min-height: 1000rpx;
		background: #FFFFFF;
		// box-shadow: 0px 0px 30rpx 0rpx rgba(202, 202, 202, 0.6);
		border-radius: 50rpx 50rpx 0 0;
		margin: -30rpx auto 0;
		padding: 40rpx 10rpx;
		// margin-top: 300rpx;


		.register_txt {
			/deep/.u-tabs__wrapper__nav__item {
				flex: 1;
			}
		}

		.second {
			padding: 24rpx 0 12rpx 10rpx;

			.secondItem {
				width: 110rpx;
				line-height: 52rpx;
				background: #fff;
				border-radius: 26rpx;
				border: 1px solid #DDDDDD;
				font-size: 26rpx;
				color: #888888;
				margin-left: 22rpx;


				&.cur {
					border: 1px solid #252525;
					color: #252525;
				}
			}
		}

		.manage {
			text-align: right;
			font-size: 26rpx;
			color: #252525;
			padding: 10rpx 30rpx;
		}
	}

	.menus {
		padding: 60rpx 100rpx 30rpx;

		.items {
			font-size: 30rpx;
			color: $uni-text-color;
			line-height: 90rpx;
		}
	}
}
.notice_boxFix{
	// position: fixed;/
	// top: 100rpx;
	height: 600rpx;
}
</style>